<template>
  <div class="home">
    <div class="main">
      <h2>小目标列表</h2>
      <div class="list">
        <h3>添加小目标</h3>
        <input type="text" v-model="search" @keydown.enter="addList" />
      </div>
      <p>
        共有{{ totalList.length }}个目标,{{
          num == 0
            ? "全部完成了"
            : "已完成" + (totalList.length - num) + "，还有" + num + "条未完成"
        }}
      </p>
      <h2>未完成目标</h2>
      <ul>
        <li
          v-for="(item, index) in totalList"
          :key="index"
          v-show="!item.status"
        >
          <input type="checkbox" v-model="item.status" />
          <div>{{ item.name }}</div>
          <button @click="del(index)">删除</button>
        </li>
      </ul>
      <h2>已完成目标</h2>
      <ul>
        <li
          v-for="(item, index) in totalList"
          :key="index"
          v-show="item.status"
        >
          <input type="checkbox" v-model="item.status" />
          <div>{{ item.name }}</div>
          <button @click="del(index)">删除</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      search: "", //搜索

      totalList: [
        { name: "HTML5", status: false },
        { name: "CSS3", status: false },
        { name: "vue", status: false },
        { name: "react", status: false },
      ],
    };
  },
  computed: {
    num() {
      return this.totalList.filter(function (item) {
        return !item.status;
      }).length;
    },
  },
  methods: {
    addList() {
      const { totalList } = this;

      totalList.push({ name: this.search, status: false });
    },
    del(index) {
      this.totalList.splice(index, 1);
    },
  },
  mounted() {},
  created() {},
};
</script>
<style scoped lang="scss"></style>
